<template>
	<view>
		<swiper style="height: calc(100vh - 150rpx);" :current="swipercurrent" @change="changeswiper">
			<!-- 单选多选 -->
			<swiper-item v-for="(item,index) in list.data" :key="item.id">
				<scroll-view scroll-y="true" class="mainpadding2"
					style="height: calc(100vh - 150rpx);position: relative;" @scroll="scrollchange">
					<view class="" style="padding-bottom: 100rpx;" :id="'swiper'+item.id">
						<view class="flexleft margin_top">
							<view class="xiaohei margin_right">{{index+1}}/{{list.total}}</view>
							<u-line-progress :percentage="percentage(index)" :showText="false" height="8"
								activeColor="#3478f5" inactiveColor="#e6edf9"></u-line-progress>
						</view>
						<!-- 0,3听写题， 0,2情景选择题，1单选题，2多选题，3判断题，4连线题，5填空题，6简答题  -->
						<view class="margin_top">
							<text class="titype xiaolan ">{{item.problem.type_text}}</text>
						</view>
						<view class="titletext bold hei_text margin_top" v-if="item.parent.id">
							<text>{{item.parent.name}}</text>
						</view>
						<template v-if="item.parent.image_text">
							<image :src="item.parent.image_text" class="margin_top" style="width: 100%;height: 250rpx;"
								mode=""></image>
						</template>
						<template v-if="item.parent.audio_text">
							<view class="tingliclass flexbetween margin_top">
								<view class="flexleft margin_right" v-if="!item.is_play" @click="playAudio(index,item)">
									<u-icon name="play-circle" color="#999" size="28"></u-icon>
								</view>
								<view class="flexleft margin_right" v-if="item.is_play" @click="playAudio(index,item)">
									<u-icon name="pause-circle" color="#999" size="28"></u-icon>
								</view>
								<view class="flexbetween" style="width: 100%;">
									<view class="xiaohui">{{item.ybf_time | timeToMinute}}</view>
									<view style="width: 400rpx;">
										<slider activeColor="rgb(52, 120, 245)" backgroundColor="rgba(212, 212, 212, 1)"
											:block-size="12" :max="item.audio_duration" :value="item.ybf_time"
											@change="sliderToPlay($event,index,item)" />
									</view>
									<view class="xiaohui">{{item.audio_duration | timeToMinute}}</view>
								</view>
							</view>
						</template>
						<!-- 题目类型开始 -->
						<view class="titletext bold hei_text margin_top">
							<text>{{item.problem.name}}</text>
							<text class="hui_text" style="font-weight: 400;">（{{item.total_score}}分）</text>
						</view>
						<!-- 单选题 -->
						<template v-if="item.problem.type==1">
							<view class="flexleft tilable margin_top"
								:class="item.answer_content==ite.key?'hongcontent':item.correct_answer_content==ite.key?'lancontent':''"
								v-for="ite in item.problem.content_json" :key="ite.key"
								@click="changedxtvalue(item,ite)">
								<view
									:class="item.answer_content==ite.key?'deleteimg':item.correct_answer_content==ite.key?'duiimg':''">
								</view>
								<view class="titletext bold"
									:class="item.answer_content==ite.key?'hong_text':item.correct_answer_content==ite.key?'lan_text':'hei_text'"
									style="min-width: 10%;">{{ite.key}}</view>
								<view
									:class="item.answer_content==ite.key?'xiaohong':item.correct_answer_content==ite.key?'xiaolan':'xiaohui'"
									style="min-width: 80%;max-width: 80%;">{{ite.value}}</view>
							</view>
							<!-- 错误的 -->
							<!-- <view class="flexleft tilable margin_top hongcontent">
								<view class="deleteimg"></view>
								<view class="titletext bold hong_text" style="min-width: 10%;">A</view>
								<view class="xiaohong" style="min-width: 80%;max-width: 80%;">
									下列句中有一个问题大家猜猜是什么问题请及时指正下家猜猜是什么问题请及时指正</view>
							</view> -->
							<!-- 正确的 -->
							<!-- <view class="flexleft tilable margin_top lancontent">
								<view class="duiimg"></view>
								<view class="titletext bold lan_text" style="min-width: 10%;">D</view>
								<view class="xiaolan" style="min-width: 80%;max-width: 80%;">
									下列句中有一个问题大家猜猜是什么问题请及时指正下家猜猜是什么问题请及时指正</view>
							</view> -->
							<!-- 没有选择的 -->
							<!-- <view class="flexleft tilable margin_top">
								<view class="titletext bold hei_text" style="min-width: 10%;">B</view>
								<view class="xiaohui" style="min-width: 80%;max-width: 80%;">
									下列句中有一个问题大家猜猜是什么问题请及时指正下家猜猜是什么问题请及时指正</view>
							</view> -->
							<!-- 选择的 -->
							<!-- <view class="flexleft tilable margin_top lancontent">
								<view class="titletext bold lan_text" style="min-width: 10%;">B</view>
								<view class="xiaolan" style="min-width: 80%;max-width: 80%;">
									下列句中有一个问题大家猜猜是什么问题请及时指正下家猜猜是什么问题请及时指正</view>
							</view> -->
						</template>
						<!-- 多选题 -->
						<template v-if="item.problem.type==2">
							<view class="flexleft tilable margin_top"
								:class="ite.daan==2?'hongcontent':ite.daan==1?'lancontent':''"
								v-for="ite in item.problem.content_json" :key="ite.key">
								<view :class="ite.daan==2?'deleteimg':ite.daan==1?'duiimg':''"></view>
								<view class="titletext bold"
									:class="ite.daan==2?'hong_text':ite.daan==1?'lan_text':'hei_text'"
									style="min-width: 10%;">{{ite.key}}</view>
								<view :class="ite.daan==2?'xiaohong':ite.daan==1?'xiaolan':'xiaohui'"
									style="min-width: 80%;max-width: 80%;">
									{{ite.value}}
								</view>
							</view>
						</template>
						<!-- 判断题 -->
						<template v-if="item.problem.type==3">
							<view class="flexleft tilable margin_top"
								:class="item.answer_content==ite.key?'hongcontent':item.correct_answer_content==ite.key?'lancontent':''"
								v-for="ite in item.problem.content_json" :key="ite.key"
								@click="changedxtvalue(item,ite)">
								<view
									:class="item.answer_content==ite.key?'deleteimg':item.correct_answer_content==ite.key?'duiimg':''">
								</view>
								<view class="titletext bold"
									:class="item.answer_content==ite.key?'hong_text':item.correct_answer_content==ite.key?'lan_text':'hei_text'"
									style="min-width: 10%;">{{ite.key}}</view>
								<view
									:class="item.answer_content==ite.key?'xiaohong':item.correct_answer_content==ite.key?'xiaolan':'xiaohui'"
									style="min-width: 80%;max-width: 80%;">{{ite.value}}</view>
							</view>
						</template>
						<!-- 连线题 -->
						<template v-if="item.problem.type==4">
							<view class="flexbetween">
								<canvas :canvas-id="'drawCanvas'+item.id" :style="{height:item.swiperHeight+'rpx'}"
									style="width: 750rpx;height: 100vh;position: absolute;top: 0;left: 0;z-index: -1;">
								</canvas>
								<view class="left">
									<view class="tilable margin_top xiaohui" :id="'left'+index+ind"
										v-for="(ite,ind) in item.left" :key="ind">
										{{ite.name}}</view>
								</view>
								<view class="right">
									<view class="tilable margin_top xiaohui" :id="'right'+index+ind"
										v-for="(ite,ind) in item.right" :key="ind">
										{{ite.name}}</view>
								</view>
							</view>
						</template>
						<!-- 填空题 -->
						<template v-if="item.problem.type==5">
							<view class="flexleft tilable margin_top" v-for="(ite,ind) in item.cwda" :key="ite.key"
								:class="ite.daan==0?'hongcontent':'lancontent'">
								<view class="deleteimg" v-if="ite.daan==0"></view>
								<view class="duiimg" v-if="ite.daan==1"></view>
								<view class="titletext bold" :class="ite.daan==0?'hong_text':'lan_text'"
									style="min-width: 10%;">{{ite.key}}</view>
								<input type="text" :class="ite.daan==0?'xiaohong':'xiaolan'" disabled
									v-model="item.answer_content_json[ind].value" style="min-width: 80%;max-width: 80%;">
							</view>
						</template>
						<!-- 简单题 -->
						<template v-if="item.problem.type==6">
							<view class="jianda radius mainpadding_top">
								<textarea class="textareaclass xiaohui" disabled
									v-model="item.answer_content"></textarea>
							</view>
						</template>
						<view class="flexbetween margin_top"
							v-if="item.problem.type==1 || item.problem.type==2 || item.problem.type==3">
							<view class="hei_text bold titletext">正确答案：{{item.correct_answer_content}}</view>
							<view class="hei_text bold titletext">你的答案：{{item.answer_content}}</view>
						</view>
						<view class="margin_top" v-if="item.problem.type==4">
							<view class="hei_text bold titletext">正确答案：</view>
							<view class="margin_top" v-for="(ite,ind) in item.problem.answer_content_json" :key="ind">{{item.left[ite.left].name}}---{{item.right[ite.right].name}}</view>
							<view class="hei_text bold margin_top titletext">你的答案：</view>
							<view class="margin_top" v-for="(ite,ind) in item.answer_content_json" :key="ind">{{item.left[ite.left].name}}---{{item.right[ite.right].name}}</view>
						</view>
						<template v-if="item.problem.type==6">
							<view class="hei_text bold margin_top titletext">你的答案：{{item.answer_content}}</view>
						</template>
						<template v-if="item.problem.type==5">
							<view class="hei_text bold margin_top titletext">正确答案：</view>
							<view class="margin_top">
								v-for="(ite,ind) in item.problem.answer_content_json" :key="ind">{{ite.key}}：{{ite.value}}
							</view>
						</template>
						<view class="margin_top main_size bold lan_text">解析：</view>
						<!-- <video src="https://cdn.uviewui.com/uview/resources/video.mp4" class="margin_top"
							style="width: 300rpx;height: 200rpx;"></video> -->
						<view class="xiaohui margin_top">
							<u-parse :content="item.analysis_content"></u-parse>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="posibottom mainpadding flexbetween ffffff">
			<view class="resetbtn" style="border-radius: 15rpx;background-color: #e6edf9;width: 25%;" @click="yichu">
				移除</view>
			<view class="resetbtn" style="border-radius: 15rpx;background-color: #e6edf9;width: 35%;" @click="upswiper">
				上一题</view>
			<view class="surebtn" style="border-radius: 15rpx;width: 35%;" v-if="swipercurrent!=list.total-1"
				@click="downswiper">下一题</view>
			<view class="surebtn" style="border-radius: 15rpx;width: 35%;" v-if="swipercurrent==list.total-1"
				>下一题</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listtype: 1, //分类:1=单选题,2=多选题,3=判断题,4=连线题,5=填空题,6=简答题




				timu_list: [],
				swipercurrent: 0, //轮播当前滑块
				swiperupcurrent: 0, //轮播上一次的滑块
				platform: "",
				bgAudioManager: null,
				audio_currentIndex: 0, //当前播放的音频下标
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				flag: true,
				scrolltop: 0,
				equipmentwidth:0,
			}
		},
		onLoad(options) {
			this.listtype = options.type
			let getWindowInfo = uni.getWindowInfo()
			this.equipmentwidth = getWindowInfo.screenWidth
			console.log(this.equipmentwidth,"惊雷");
			this.bgAudioManager = wx.getBackgroundAudioManager()
			this.platform = uni.getSystemInfoSync().platform;
			this.init()
		},
		onHide() {
			if (this.bgAudioManager) {
				this.bgAudioManager.stop()
			}
		},
		onUnload() {
			if (this.bgAudioManager) {
				this.bgAudioManager.stop()
			}
		},
		watch: {
			swipercurrent() {
				if (this.page < this.list.last_page && this.swipercurrent == this.list.data.length - 1) {
					let page = Number(this.page) + 1
					this.page = page
					this.init(true, page)
				} else {
					return
				}
			},
			"list.data":{
				deep:true,
				handler(newval) {
					let _this = this;
					if (_this.flag == true && this.listtype == 4) {
						_this.flag = false
						_this.$nextTick(() => {
							_this.list.data.forEach((item, index) => {
								if (item.answer_content_json.length) {
									let answer_content = JSON.parse(item.answer_content)
									answer_content.forEach((ans, ansind) => {
										let idname1 = "#" + "left" + index + ans.left
										let idname2 = "#" + "right" + index + ans.right
										let data = {
											leftid: ans.left + 'left',
											leftitem: item.left[ans.left],
											leftmsg: {
												x: 0,
												y: 0
											},
											rightid: ans.right + 'right',
											rightitem: item.right[ans.right],
											rightmsg: {
												x: 0,
												y: 0
											}
										}
										// const query = uni.createSelectorQuery().in(this);
										uni.createSelectorQuery().select(idname2)
											.boundingClientRect(res2 => {
												data.rightmsg.x = res2.right - (index * _this.equipmentwidth) -
													res2.width
												data.rightmsg.y = res2.top + (res2.height / 2)
											}).exec();
										uni.createSelectorQuery().select(idname1)
											.boundingClientRect(res1 => {
												data.leftmsg.x = res1.left - (index * _this.equipmentwidth)
												data.leftmsg.y = res1.top + (res1.height / 2)
											}).exec();
										item.lxarr.push(data)
									})
									console.log(item.lxarr, "数据信息维护");
									this.lxFnshow(index)
								}
								let idname3 = "#swiper" + item.id
								// console.log(idname3,"高度高度");
								uni.createSelectorQuery().select(idname3)
									.boundingClientRect(res2 => {
										this.$set(item, "swiperHeight", res2.height * 2)
										// console.log(res2,"高度高度");
									}).exec();
							})
						})
					}

				}
			}
		},
		methods: {
			lxFnshow(current) {
				const ctx = uni.createCanvasContext('drawCanvas' + this.list.data[current].id)
				let lxarr = this.list.data[current].lxarr
				setTimeout(() => {//这里加个定时器的原因是因为上边获取元素xy是异步请求，到这里的时候值拿不到所以加个定时器方便获取到值
					lxarr.forEach((item, index) => {
						ctx.moveTo(item.leftmsg.x, item.leftmsg.y)
						ctx.lineTo(item.rightmsg.x, item.rightmsg.y)
					})
					ctx.setStrokeStyle("#3478f5"); //线条颜色
					ctx.stroke() //画线条
					ctx.draw() //绘制画布内容
				}, 500)
			},
			scrollchange(e) {
				this.scrolltop = e.detail.scrollTop
			},
			yichu() {
				httpRequest.request('/api/examination/removewrong', 'POST', {
					student_answer_id: this.list.data[this.swipercurrent].id
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.list.data.splice(this.swipercurrent, 1)
						this.list.total = Number(this.list.total) - 1
						if (this.list.total) {
							httpRequest.toast("移除成功");
						} else {
							httpRequest.toast("当前类型题目已全部移除，系统将在1s后自动返回！");
							setTimeout(() => {
								uni.navigateBack(1)
							}, 1000)
							return false
						}
						let page = Number(this.page) + 1
						this.page = page
						this.init(true, page)
					} else {
						httpRequest.toast(res.msg);
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/api/examination/getwronglist', 'GET', {
					page: page || 1,
					limit: 12,
					type: this.listtype
				}, false, false, true).then(res => {
					
					res.data.data.forEach(item => {
						if (item.parent.orther_type == 3) {
							// 苹果
							if (_this.platform === "ios") {
								let innerAudioContext = uni.createInnerAudioContext()
								innerAudioContext.src = item.parent.audio_text //音频路劲
								innerAudioContext.onCanplay(() => { //获取总时长
									let intervalID = setInterval(() => {
										if (innerAudioContext.duration !== 0) {
											clearInterval(intervalID);
											innerAudioContext.destroy()
											_this.$set(item, "audio_duration",
												innerAudioContext
												.duration)
										}
									}, 100);
								})
							} else {
								// 安卓
								let innerAudioContext = uni.createInnerAudioContext()
								innerAudioContext.src = item.parent.audio_text //音频路劲
								innerAudioContext.play();
								innerAudioContext.pause()
								innerAudioContext.onCanplay(() => { //
									let intervalID = setInterval(() => {
										if (innerAudioContext.duration !== 0) {
											clearInterval(intervalID);
											_this.$set(item, "audio_duration",
												innerAudioContext
												.duration)
										}
										innerAudioContext.destroy()
									}, 100);
								})
							}
							this.$set(item, "ybf_time", 0)
							this.$set(item, "is_play", false)
							// console.log(item, "我是音频播放");
						}
					})
					if (this.listtype == 2) {
						res.data.data.forEach(item => {
							let zqda = item.correct_answer_content.split(" ")
							let cwda = item.answer_content.split(" ")
							item.problem.content_json.forEach(ite => {
								this.$set(ite, "daan", 0)
								cwda.forEach(cw => {
									if (ite.key == cw) {
										ite.daan = 2
									}
								})
								zqda.forEach(zq => {
									if (ite.key == zq) {
										ite.daan = 1
									}
								})
							})
						})
						console.log(res.data, "jinglei");
					}
					if (this.listtype == 4) {
						res.data.data.forEach(item => {
							let left = []
							let right = []
							item.problem.content_json.forEach((ite, ind) => {
								left.push({
									id: ind, //id拿下标这样后边提交方便处理
									name: ite.left_value,
									ischeck: false, //连线题的ischeck跟多选区分开这样好查找
								})
								right.push({
									id: ind, //id拿下标这样后边提交方便处理
									name: ite.right_value,
									ischeck: false, //连线题的ischeck跟多选区分开这样好查找
								})
							})
							let correct_answer_content_json = JSON.parse(item.correct_answer_content)
							this.$set(item, "left", left);
							this.$set(item.problem, "correct_answer_content_json", correct_answer_content_json);
							this.$set(item, "right", right);
							this.$set(item, "lxarr", []);
						})
						console.log(res.data, "jinglei");
					}
					if (this.listtype == 5) {
						res.data.data.forEach(item => {
							let zqda = JSON.parse(item.correct_answer_content)
							let cwda = JSON.parse(item.answer_content)
							cwda.forEach(cw => {
								this.$set(cw, "daan", 0)
								zqda.forEach(zq => {
									if (cw.value == zq.value) {
										cw.daan = 1
									}
								})
							})
							this.$set(item, "cwda", cwda)
						})
						console.log(res.data, "jinglei");
					}
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
					this.flag = true
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			playAudio(index, item) { //点击音频播放音频
				this.audio_currentIndex = index
				if (!item.is_play) {
					this.bgAudioManager.title = item.parent.name;
					// this.bgAudioManager.playbackRate = Number(this.speedText).toFixed(1)//倍速
					this.bgAudioManager.seek(item.ybf_time)
					this.bgAudioManager.singer = '志辉';
					this.bgAudioManager.coverImgUrl = 'https://web-assets.dcloud.net.cn/unidoc/zh/music-a.png';
					this.bgAudioManager.src = item.parent.audio_text
					this.list.data[this.audio_currentIndex].is_play = true
					this.watchMusic()
				} else {
					this.list.data[this.audio_currentIndex].is_play = false
					this.bgAudioManager.pause()
				}
			},
			sliderToPlay(t, index) {
				this.list.data[index].ybf_time = t.detail.value
				this.bgAudioManager.seek(this.list.data[index].ybf_time)
			},
			watchMusic() {
				let _this = this
				this.bgAudioManager.onTimeUpdate(() => {
					this.list.data[this.audio_currentIndex].ybf_time = _this.bgAudioManager.currentTime
					// console.log(_this.bgAudioManager, "更新了");
				})
				this.bgAudioManager.onEnded(() => {
					console.log("音频播放结束");
					this.list.data[this.audio_currentIndex].is_play = false
				})
			},
			upswiper() { //上一题
				this.swipercurrent = this.swipercurrent - 1
			},
			downswiper() { //上一题
				this.swipercurrent = this.swipercurrent + 1
			},
			changeswiper(e) {
				console.log("事件", e);
				this.list.data[this.audio_currentIndex].is_play = false
				if (this.bgAudioManager) {
					this.bgAudioManager.stop()
				}
				// this.bgAudioManager.pause()
				if (e.detail.source == "touch" && e.detail.current > this.swiperupcurrent) { //用户滑动的时候提交接口并且是向后滑动时提交答案
					console.log("下滑，要提交的题目下标为", e.detail.current - 1);
					this.swipercurrent = e.detail.current
					this.swiperupcurrent = e.detail.current - 1
				}
				if (e.detail.source == "touch" && e.detail.current < this.swiperupcurrent + 1) { //用户滑动的时候提交接口并且是向后滑动时提交答案
					console.log("上滑，要提交的题目下标为", e.detail.current + 1);
					this.swipercurrent = e.detail.current
					this.swiperupcurrent = e.detail.current
				}
			},


			lineleft(e, current, val) {
				// console.log(e,"惊雷");
				const querys = uni.createSelectorQuery().in(this);
				querys.select("#" + e.target.id).boundingClientRect(res1 => {
					// console.log(res1,"惊雷");
					// let x = res1.left + res1.width
					let x = res1.left
					let y = res1.top + (res1.height / 2) + this.scrolltop
					// console.log(y,"9999");
					// 将默认上一次选中的左边的列表数据删除
					if (current.lxarr.length && !current.lxarr[current.lxarr.length - 1].rightid) {
						current.lxarr.pop()
					}
					// 如果已经存在连线需要将当前连线数据删除
					if (current.lxarr.length) {
						current.lxarr.forEach((item, index) => {
							if (item.leftid == val.id + "left") {
								// console.log(item, "当前选中内容");
								current.lxarr.splice(index, 1)
							}
						})
						this.lxFn(current)
					}
					current.lxarr.push({
						leftmsg: {
							x: x,
							y: y
						},
						leftitem: val,
						leftid: val.id + "left"
					})
				}).exec();
			},
			lineright(e, current, val) {
				const querys = uni.createSelectorQuery().in(this);
				querys.select("#" + e.target.id).boundingClientRect(res1 => {
					let x = res1.left
					let y = res1.top + (res1.height / 2) + this.scrolltop
					current.lxarr[current.lxarr.length - 1] = {
						leftmsg: current.lxarr[current.lxarr.length - 1].leftmsg,
						leftitem: current.lxarr[current.lxarr.length - 1].leftitem,
						leftid: current.lxarr[current.lxarr.length - 1].leftid,
						rightmsg: {
							x: x,
							y: y
						},
						rightitem: val,
						rightid: val.id + "right"
					}
					this.lxFn(current)
				}).exec();
			},
			lxFn(current) {
				const ctx = uni.createCanvasContext('drawCanvas' + current.id)
				current.lxarr.forEach(item => {
					ctx.moveTo(item.leftmsg.x, item.leftmsg.y)
					ctx.lineTo(item.rightmsg.x, item.rightmsg.y)
				})
				console.log(current.lxarr, "连线题的数据内容");
				ctx.setStrokeStyle("#3478f5"); //线条颜色
				ctx.stroke() //画线条
				ctx.draw() //绘制画布内容
			},
			percentage(index, val) { //进度条进度
				return (index + 1) / this.list.total * 100
			},
			jumpurl(url) {
				uni.navigateTo({
					url
				})
			}
		},
		filters: {
			// 秒转换分钟00:00:00格式
			timeToMinute(times) {
				let t;
				if (times > -1) {
					let min = Math.floor(times / 60) % 60;
					let sec = times % 60;
					if (min < 10) {
						t = '0' + min + ":";
					} else {
						t = min + ":";
					}
					if (sec < 10) {
						t += "0";
					}
					t += sec.toFixed(2);
				}
				if (t) {
					t = t.substr(0, 5);
				}
				return t;
			}
		},
	}
</script>

<style lang="scss" scoped>
	/deep/.u-radio-group {
		flex: none !important;
	}

	.itemkabox {
		width: 16.66%;
	}

	.itemka {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: rgba(153, 153, 153, .3);
		line-height: 80rpx;
		text-align: center;
	}

	.itemkas {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #3478f5;
		line-height: 80rpx;
		text-align: center;
	}

	.jianda {
		border: 1rpx solid rgba(153, 153, 153, .3);
	}

	.titype {
		background-color: #e6edf8;
		border-radius: 50rpx;
		padding: 10rpx 40rpx;
	}

	.tilable {
		border: 1rpx solid rgba(153, 153, 153, .3);
		border-radius: 14rpx;
		position: relative;
		background-color: #fff;
		padding: 15rpx 30rpx;
		box-sizing: border-box;
	}

	/deep/.u-count-down__text {
		color: #3478f5;
		font-size: 20rpx;
	}

	.hongcontent {
		border: 1rpx solid #ff0000;
		background-color: #ffebeb;
	}

	.lancontent {
		border: 1rpx solid #3478f5;
		background-color: #e6edf9;
	}

	.tingliclass {
		padding: 10rpx 30rpx;
		border: 1rpx solid rgba(153, 153, 153, .3);
		border-radius: 50rpx;
		box-sizing: border-box;
	}
</style>